<template>
    <div class="rgb">
      <!-- 头部logo -->
      <div class="logo">
          <div class="logo_img">
              <div class="logo_img_p"></div>
              <p>更新日期:04月16日</p>
          </div>
      </div>
      <!-- 歌单部分 -->
      <div class="gedan">
          <ul>
              <li v-for="(item,index) in list" :key="item.index" @click="ged(item.id)">
                  <div class="left">
                      <span>{{index>=9?`${index+1}`:`${'0'+(index+1)}`}}</span>
                  </div>
                  <div class="right">
                     <div class="left_wen">
                         <p>{{item.name}}</p>
                         <p><a href="javaascript:;"></a><span>{{item.ar[0].name}}-{{item.name}}</span></p>
                     </div>
                     <div class="right_span"><span>&#xe623;</span></div>
                  </div>
              </li>
          </ul>
      </div>
      <div class="wen" @click="btn">
          <p>点击查看完整榜单</p>
      </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
          list:[],
          sum:30
        }
    },
    methods:{
        getrg(){
            this.$axios.get("/top/list?idx=1&_limit=8")
             .then(res=>{
               
                //  console.log(res)
                 this.list = res.data.playlist.tracks.slice(0,this.sum)
                 
             })
        },
        ged(ids){
            this.$router.push({name:'yinyue',params:{id:ids}})
        },
        btn(){
            this.sum+= 10
             this.getrg()
        }

    },
    created(){
        this.getrg()
    }

}
</script>

<style scoped>
.logo{
    width:100%;
    height:145px;
    background: url('../../assets/regeb.png') no-repeat ;
    background-size:100% 100%;
    padding:30px 20px;
    position: relative;
} 
.logo::after{
  content:'';
  background-color:rgba(0, 0, 0, 0.2);
  position: absolute;
  left:0;
  top:0;
  right:0;
  bottom: 0;
 
}

.logo_img{
    width:142px;
    height:67px;
   
}
.logo_img_p{
      width:142px;
    height:67px;
     background: url("../../assets/热歌榜.png");
    background-position: -24px -30px;
    background-size:166px 97px;
}
.logo_img>p{
    color:white;
    font-size:14px;
}
.gedan{
    width:100%;
    
}
.gedan>ul{
    width:100%;
}
.gedan>ul>li{
    display: flex;
    width:100%;
    justify-content: space-evenly;
    align-items: center;
    padding:3px;
}
.gedan>ul>li>.left{
    width:15%;
    text-align: center;
}
.gedan>ul>li>.left>span{
    color:#888888;
}
.gedan>ul>li:nth-of-type(1)>.left>span{
    color:#DF3436;
}
.gedan>ul>li:nth-of-type(2)>.left>span{
    color:#DF3436;
}
.gedan>ul>li:nth-of-type(3)>.left>span{
    color:#DF3436;
}
.gedan>ul>li>.right{
    width:85%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding:3px;
}
.left_wen>p:nth-of-type(2)>a{
    text-decoration: none;
    display:inline-block;
    width:15px;
    height:9px;
    background:url("../../assets/热歌榜.png") no-repeat ;
    background-position: -1px -1x;
     background-size:180px 110px;
}
.left_wen>p:nth-of-type(2)>span{
 color:#888888;
 font-size: 12px;
}
.right_span{
text-align: center;
width:40px;
font-family: "wy";
color:#888888;
font-size:25px;
}
.wen{
    width:100%;
    height:30px;
    text-align: center;
}
.wen>p{
    color:#888888;
    font-size: 14px;
}

</style>